<template>
	<view class="driving-page">
		<!-- 雪花背景 -->
		<canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>

		<!-- 未报名状态 -->
		<view v-if="!isEnrolled" class="empty-state fade-in">
			<image src="/static/driving_empty.png" class="empty-img" />
			<view class="empty-text">你还没有报名驾校哦~</view>
			<button class="btn-go" @click="goRegister">去选驾校报名</button>
		</view>

		<!-- 已报名状态 -->
		<view v-else class="enrolled-info fade-in-up">
			<view class="card">
				<view class="title">我的驾校</view>
				<view class="item"><text class="label">驾校：</text>{{ info.school }}</view>
				<view class="item"><text class="label">课程：</text>{{ info.course }}</view>
				<view class="item"><text class="label">报名时间：</text>{{ info.time }}</view>
			</view>

			<view class="card">
				<view class="title">练车预约</view>
				<view class="item"><text class="label">科目二：</text>{{ info.subject2 }}</view>
				<view class="item"><text class="label">科目三：</text>{{ info.subject3 }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEnrolled: true, // 模拟状态：false 为未报名
				info: {
					school: '阳光驾校',
					course: 'C1 手动挡',
					time: '2025-05-13',
					subject2: '2025-06-05 上午9:00 教练A',
					subject3: '2025-07-10 下午2:00 教练B'
				}
			};
		},
		onReady() {
			this.initSnowEffect();
		},
		methods: {
			goRegister() {
				uni.navigateTo({
					url: '/pages/service/driving/driving'
				});
			},
			initSnowEffect() {
				const sys = uni.getSystemInfoSync();
				const W = sys.windowWidth;
				const H = sys.windowHeight;
				const ctx = uni.createCanvasContext('snow-canvas', this);
				const snowflakes = Array.from({
					length: 35
				}, () => ({
					x: Math.random() * W,
					y: Math.random() * H,
					r: Math.random() * 2.5 + 1,
					d: Math.random() * 1.5 + 0.5
				}));
			
				const draw = () => {
					ctx.clearRect(0, 0, W, H);
					ctx.setFillStyle('rgba(255,255,255,0.8)');
					ctx.beginPath();
					snowflakes.forEach(flake => {
						ctx.moveTo(flake.x, flake.y);
						ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
					});
					ctx.fill();
					snowflakes.forEach(flake => {
						flake.y += flake.d;
						flake.x += Math.sin(flake.y / 30) * 0.6;
						if (flake.y > H) {
							flake.y = 0;
							flake.x = Math.random() * W;
						}
					});
					ctx.draw();
					// #ifdef H5
					requestAnimationFrame(draw);
					// #endif
					// #ifdef MP-WEIXIN
					setTimeout(draw, 1000 / 60);
					// #endif
				};
				draw();
			}
		}
	};
</script>

<style scoped>
	.driving-page {
		position: relative;
		min-height: 100vh;
		background: linear-gradient(to bottom, #e0f7fa, #ffffff);
		padding: 30rpx;
		overflow: hidden;
	}

	.snow-canvas {
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100vw;
	  height: 100vh;
	  z-index: 0; /* 在最底层 */
	  pointer-events: none;
	}

	/* 过渡动画 */
	.fade-in {
		animation: fadeIn 0.8s ease-in-out;
	}

	.fade-in-up {
		animation: fadeInUp 0.8s ease-in-out;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 空态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
	}

	.empty-img {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.btn-go {
		background: #00bcd4;
		color: white;
		font-size: 30rpx;
		padding: 16rpx 40rpx;
		border-radius: 50rpx;
		box-shadow: 0 6rpx 10rpx rgba(0, 188, 212, 0.3);
	}

	/* 已报名样式 */
	.enrolled-info .card {
		background: white;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #00796b;
		margin-bottom: 20rpx;
	}

	.item {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
	}

	.label {
		font-weight: bold;
		color: #666;
	}
</style>